<DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>index</title>
  <link rel="stylesheet" type="text/css" href="css/index.css">
  <!-- 引入样式 -->
  <link rel="stylesheet" href="javascript/vue-element-ui/index.css">
  <link rel="stylesheet" type="text/css" href="font-awesome/css/font-awesome.min.css">
  <script src="javascript/vue-element-ui/vue.min.js"></script>
  <script src="javascript/vue-element-ui/index.js"></script>
  <script src="javascript/vue-element-ui/axios.min.js"></script>

</head>
<body>

	<div class="app" id="app">
		<el-container>
			<el-header height="76px" class="index_top">
				<div class="in_left">
					<img @click="gohome('index_list.html')" src="images/head_name.png">
				</div>

				<!--导航-->
				<div class="in_name">
					<h1>{{title}}</h1>
				</div>

				<!--登录状态-->
				<div class="in_right">
					<div class="yh_name">
						<img src="images/yh_name.png">
						<p>{{user.name}}</p>
						<span>{{user.type}}</span>
					</div>
					<p class="in_rigth_xian"></p>
					<div class="yh_tc">
						<a href="#">
							<img class="icon_wxz" src="images/icon_sz1.png">
							<img class="icon_xz" src="images/icon_sz1.png">
						</a>
						<a href="#">
							<img class="icon_wxz" src="images/icon_tc.png">
							<img @click="gologin('login.html')" class="icon_xz" src="images/icon_tc1.png">
						</a>
					</div>
				</div>
			</el-header>
			<el-container>
				<el-aside :width="iscollapse ? '65px':'230px'">
					<div class="toggle_menu" @click="toggle_menu"><i :class="iscollapse ? 'el-icon-s-unfold':'el-icon-s-fold'"></i></div>
					<el-menu 
						ref="menuref"
						class="el-menu-vertical-demo" 
						:collapse="iscollapse"
		          		:collapse-transition="false"
		          		:default-active="activePath"
		          		unique-opened>
		          		<el-submenu :index="item.id+''" v-for="item in menulist"  :key="item.id">
							<template slot="title">
								<i :class="item.icon"></i>
								<span :to="item.id">{{item.name}}</span>
							</template>
							<el-menu-item :index="''+item1.src" @click="saceNavstate(item,index)" v-for="(item1,index) in item.children" :key="item1.id">
								<template slot="title">
									<span :to="item1.src">{{item1.name}}</span>
								</template>
							</el-menu-item>
						</el-submenu>
					</el-menu>
				</el-aside>
				<el-container>
					<el-breadcrumb separator-class="el-icon-arrow-right">
					    <el-breadcrumb-item :key="item.id" v-for="item in breadList">{{item.name}}</el-breadcrumb-item>
					    <!-- <el-breadcrumb-item v-if="breadList==null" :key="item.id" v-for="item in breadListindex">{{item.name}}</el-breadcrumb-item> -->
					</el-breadcrumb>
					<el-main>
						<iframe class="index_map" :src="iframeUrl"></iframe>
					</el-main>
					<el-footer height="40px">天气在线公司版权所有</el-footer>
				</el-container>
			</el-container>
		</el-container>
	</div>
</body>
<script type="text/javascript">
	var app = new Vue({
		el: '#app',
		data:{
			title:'天气在线项目接口监控系统',
			user:{
				name:'admin',
				type:'管理员'
			},
			menulist:[
				{
					name:'空气质量服务',
					icon:'fa fa-hand-o-down',
					id:'1',
					children:[
						{
							name:'空气质量服务数据详情',
							icon:'fa fa-hand-o-down',
							id:'11',
							src:'project_list.html',
						}
					]
				},{
					name:'航空电码服务',
					icon:'fa fa-hand-o-left',
					id:'2',
					children:[
						{
							name:'航空电码服务数据详情',
							icon:'fa fa-hand-o-down',
							id:'13',
							src:'login3.html',
						}
					]
				},{
					name:'天气预报服务',
					icon:'fa fa-hand-o-right',
					id:'3',
					children:[
						{
							name:'天气预报服务数据详情',
							icon:'fa fa-hand-o-down',
							id:'15',
							src:'login5.html',
						}
					]
				},{
					name:'专家天气图服务',
					icon:'fa fa-hand-o-up',
					id:'4',
					children:[
						{
							name:'专家天气图服务数据详情',
							icon:'fa fa-hand-o-down',
							id:'17',
							src:'login7.html',
						}
					]
				},{
					name:'海洋潮汐服务',
					icon:'fa fa-hand-grab-o',
					id:'5',
					children:[
						{
							name:'海洋潮汐服务数据详情',
							icon:'fa fa-hand-o-down',
							id:'19',
							src:'login9.html',
						},{
							name:'海洋潮汐服务数据列表',
							icon:'fa fa-hand-o-down',
							id:'20',
							src:'login10.html',
						}
					]
				}
			],
			//是否收起左边菜单
			iscollapse:false,
			//iframe地址
			iframeUrl:'index_list.html',
			//高亮index
			activePath:'12',
			// 面包屑
			breadList:[{
				name:'首页'
			},{
				name:'项目监视'
			}],
		},
		created(){
			this.getuser()
			this.activePath = window.sessionStorage.getItem('activePath');
			

			if(window.sessionStorage.getItem('activePath') == null){

			}else{
				this.iframeUrl = window.sessionStorage.getItem('activePath');
			}
			//获取面包屑数据
			if(window.sessionStorage.getItem('user') == null){

			}else{
				this.breadList = JSON.parse(window.sessionStorage.getItem('user'));
			}
			
			// console.log(this.breadList)
		},
		methods:{
			//user信息
			getuser:function(){
				const loading = this.$loading({
		            lock: true,//lock的修改符--默认是false
		    	});
				axios.get('')
				.then(res=>{
					//console.log(res);
					//this.user.name=res.data
					setTimeout(() => {
			        	loading.close()
			        }, 500);
				})
				.catch(error=>{
					console.log(error)
				})
			},
			// 坐标菜单切换
			toggle_menu:function(){
				this.iscollapse = !this.iscollapse
			},
			//导航跳转
			saceNavstate:function(data,index){
				this.iframeUrl = data.children[index].src
				window.sessionStorage.setItem('activePath', data.children[index].src)
				window.sessionStorage.setItem('findindex', data.id)
				this.activePath = data.children[index].src

				
				//获取到当前菜单数据添加到面包屑中
				this.breadList.splice(0,this.breadList.length,data,data.children[index])
				window.sessionStorage.setItem('user', JSON.stringify(this.breadList));
			},

			//退出登录
			gologin:function(src){
				window.sessionStorage.clear()
				window.location.href=src
			},

			//跳转首页
			gohome:function(src){			
				//跳转
				this.iframeUrl = src
				//改变src
				window.sessionStorage.setItem('activePath',src)
				//收缩左边菜单
				this.$refs.menuref.close(window.sessionStorage.getItem('findindex'));
				window.sessionStorage.removeItem('findindex')

				window.sessionStorage.setItem('user','')

				//刷新清除高亮
				location.reload();
			},
		}
	})
</script>
<style type="text/css">
.el-menu{
	border-right: 1px solid #f5f5f5;
	background: rgba(155,223,251,0.2);	
}
.el-menu-vertical-demo{
	height: calc(100% - 35px);
}
.el-menu .el-submenu__title span{
	font-size: 16px;
}
.toggle_menu{
	width: 100%;
	height: 35px;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #fff;
	font-size: 25px;
	color: #434343;
	cursor: pointer;
	box-sizing: border-box;
	border-right: 1px solid #f5f5f5;
}
.el-container{
	height: calc(100vh - 76px);
}
.el-header{
	padding:0;
}
.el-aside{
	background: #F2F5FF;
}
.el-breadcrumb{
	height: 36px;
    display: flex;
    align-items: center;
    padding: 0px 20px;
    box-sizing: border-box;
    border-bottom: 1px solid #f5f5f5;
}
.el-main{
	background: #fafafa;
}
.el-footer{
	background: #fff;
	text-align: center;
	line-height: 40px;
	box-sizing: border-box;
	border-top: 1px solid #f5f5f5;
}
.in_name h1{
  width: auto;
  float: left;
  height: 78px;
  line-height: 78px;
  font-size: 25px;
  text-align: left;
  letter-spacing: 4px;
  text-indent: 2em;
  font-style: italic;
  color: #434343;
  margin:0;
}
.el-menu-item.is-active{
	background: #5ed2f8;
	color: #fff;
}
.el-menu--inline{
	background: #fff;
}
.el-submenu__title i{
	width: 24px;
	text-align:center;
}
</style>
</html>	